// 对话框弹窗 dialogState: 弹窗状态 Boolean
<template>
  <div ref="globalModal">
    <a-modal
      class="custom-optionsmodal-dialog-box"
      :title="dialogTitle"
      :class="iconType"
      :visible="dialogState"
      :get-container="() => $refs.globalModal"
      :width="dialogWidth"
      :mask-closable="false"
      @cancel="handleCancel(false)"
    >
      <div v-if="iconType === 'default'" class="custom-content">
        <slot name="location"></slot>
      </div>
      <div v-else class="content">
        <i v-if="showIcon" :class="'icon-' + iconType" class="icon"></i>
        <span class="text">{{ contentText }}</span>
      </div>
      <template v-slot:footer>
        <div v-if="footer" :class="draftBoxVisible ? 'footer' : 'footers'">
          <div>
            <a-button v-if="otherBtn" class="bg-color-white" @click="handleOther(false)">
              {{ btnTitle }}
            </a-button>
            <a-button v-else class="bg-color-white" @click="handleCancel(false)">
              {{ btnTitle }}
            </a-button>
            <a-button v-if="determineBtn" class="btn" type="primary" @click="handleOk(false)">{{
              btnState
            }}</a-button>
          </div>
        </div>
        <!-- 底部按钮为空 -->
        <div v-else></div>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    dialogState: Boolean, // 弹窗状态
    draftBoxVisible: Boolean, // 是否显示加入草稿箱
    dialogTitle: String, // 弹窗标题
    showIcon: Boolean, // 是否显示图标
    iconType: String, // 警告图标  default: 自定义内容； warring：警告； success：成功
    contentText: String, // 弹窗内容
    dialogWidth: String, // 弹窗宽度
    footer: {
      // 是否显示确定 取消按钮
      type: Boolean,
      default: true
    },
    determineBtn: {
      // 是否显示确定按钮
      type: Boolean,
      default: true
    },
    otherBtn: {
      // 是否显示其他按钮
      type: Boolean,
      default: false
    },
    btnTitle: {
      // 取消按钮文案
      type: String,
      default: '取消'
    },
    btnState: {
      // 确定 按钮状态
      type: String,
      default: '确定'
    }
  },
  emits: {
    handleOk: null, // 确定事件
    handleOther: null, // 其他按钮事件
    handleCancel: null // 取消事件
  },
  setup(props, context) {
    function handleCancel(state) {
      context.emit('handleCancel', state);
    }
    function handleOk(state) {
      context.emit('handleOk', state);
    }
    function handleOther(state) {
      context.emit('handleOther', state);
    }
    return {
      handleCancel,
      handleOk,
      handleOther
    };
  }
});
</script>
<style lang="less" scoped>
.micro-dormitory-modal-body {
  padding: 0 !important;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d6aa56;
  cursor: pointer;
  font-size: 14px;
}
.footers {
  display: flex;
  justify-content: flex-end;
}
.content {
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 16px;
  height: 48px;
  background: #f8f8f8;
  border-radius: 4px;
}
.icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0px 10px 0 0;
}
.icon-success {
  background: url('../../assets/images/message_icon_success.png') no-repeat center;
  background-size: 100% 100%;
}
.icon-error {
  background: url('../../assets/images/message_icon_fail.png') no-repeat center;
  background-size: 100% 100%;
}
.icon-system {
  background: url('../../assets/images/message_icon_success.png') no-repeat center;
  background-size: 100% 100%;
}
.icon-warring {
  background: url('../../assets/images/exclamation_icon_circle.png') no-repeat center;
  background-size: 100% 100%;
}
.btn {
  color: #fff !important;
}
/deep/ .ant-modal {
  top: 280px !important;
}
/deep/ .ant-modal-content {
  .ant-modal-footer {
    border-top: 0px solid red !important;
  }
  .ant-modal-header {
    border-bottom: 0px solid #f0f0f0 !important;
    color: red !important;
    padding: 24px 24px !important;
    .ant-modal-title {
      font-size: 18px !important;
      font-family: Source Han Sans CN, Source Han Sans CN-Medium;
      font-weight: 500 !important;
      color: #222222 !important;
    }
  }
  .ant-modal-body {
    padding: 0 24px 24px 24px !important;
  }
  button {
    border-radius: 4px !important;
  }
}
</style>
